<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css">
    <style>
        body{
            background: white;
        }
        .topBox{
            background: rgb(255, 255, 255);
            width: 100%;
            height: 270px;
            position: relative;
        }
        .bottomBox{
            background: rgb(36, 150, 255);
            width: 100%;
            height: calc(100vh - 270px);
            position: absolute;
            top: 270px;
            border: 0;
        }
        .topMain{
            height: 100%;
            width: 100%;
            background: url("/image/fenxiBackground.png") no-repeat fixed;
            background-size: cover;
            /*opacity: 1;*/
            border-bottom-left-radius: 60px;
            position: relative;
        }
        .bottomMain{
            height: 100%;
            width: 100%;
            border-top-right-radius: 60px;
            background: rgb(255, 255, 255);
        }
        .itemBox{
            height: 80px;
            width: 80%;
            margin: 20px auto;
            border-radius: 10px;
            background: rgb(30, 142, 255);
            position: relative;
        }
        .scrollBox{
            overflow-y: scroll;
            height: calc(100vh - 270px - 80px - 7vh);
        }
        .topMain font{
            color: white;
            font-size: 1.5em;
            font-weight: bolder;
            display: inline-block;
            position: absolute;
            left: 35px;
            font-family: 'zidingyi','zidingyi2',sans-serif;
        }
    /*    比较复杂的选择器 */
        .itemBox:nth-child(2n-1){
            background-color: rgb(27, 135, 255);
        }
        .itemBox:last-child{
            margin-bottom: 40px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="topBox" >
        <div class="topMain">
            <font style="top: 80px;">请选择</font>
            <font style="top: 120px;">要使用的</font>
            <font style="top: 160px;">数据模型</font>
            <img src="/image/fenxidiannaoImg.png"
                 style="position: absolute;top: 30px;right: 10px;display: inline-block;height: 200px;width: 200px">
        </div>
    </div>

    <div class="bottomBox" >
        <div class="bottomMain">
            <el-radio-group v-model="fenlei" size="mini" @click.native="fenleiChange"
                style="margin-top: 4vh;margin-left: 5vw;margin-bottom: 2vh">
                <el-radio-button label="推荐"></el-radio-button>
                <el-radio-button label="医疗"></el-radio-button>
                <el-radio-button label="经济"></el-radio-button>
                <el-radio-button label="气象"></el-radio-button>
                <el-radio-button label="机器学习"></el-radio-button>
            </el-radio-group>
            <div class="scrollBox">
                <font
                        style="font-size: 1.5em;
                        font-weight: bolder;
                        color: rgb(42, 159, 255);
                        display: inline-block;
                        margin-left: 10%;
                        margin-top: 2%"
                >热门</font>
                <div>
                    <div v-for="item in remen" class="itemBox" @click="toDetailfenxi(item.id)">
                        <font style="font-size: 1em;position: absolute;top: 15px;left: 18px;font-weight: bolder;color: white"
                        >{{item.title}}</font>
                        <font style="font-size: 0.5em;position: absolute;top: 40px;left: 18px;opacity: 0.85;color: white"
                        >{{item.description}}</font>
                        <font style="font-size: 0.5em;position: absolute;top: 55px;left: 18px;opacity: 0.85;color: white"
                        >{{item.file}}</font>
                        <img src="/image/fenxitiaozhuan.png"
                             style="display: inline-block;position: absolute;top: 25px;right: 20px;width: 30px;height: 30px">
                    </div>
                </div>

                <font
                        style="font-size: 1.5em;
                        font-weight: bolder;
                        color: rgb(42, 159, 255);
                        display: inline-block;
                        margin-left: 10%;
                        margin-top: 5%"
                >其他</font>
                <div>
                    <div v-for="item in qita" class="itemBox">
                        <font style="font-size: 1em;position: absolute;top: 15px;left: 18px;font-weight: bolder;color: white"
                        >{{item.title}}</font>
                        <font style="font-size: 0.5em;position: absolute;top: 40px;left: 18px;opacity: 0.85;color: white"
                        >{{item.description}}</font>
                        <font style="font-size: 0.5em;position: absolute;top: 55px;left: 18px;opacity: 0.85;color: white"
                        >{{item.file}}</font>
                        <img src="/image/fenxitiaozhuan.png"
                             style="display: inline-block;position: absolute;top: 25px;right: 20px;width: 30px;height: 30px">
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){
            //默认先请求热门分析的数据
            this.getFenxiData(this.fenlei)
            console.log(this.remen)
        },
        methods : {
            getFenxiData(_class){
                axios({
                    method : 'get',
                    url : '/fenxi?_class='+_class,
                }).then((resp)=>{
                    //前三个给热门 后面给其他
                    var fenxis = resp.data.data;
                    var one = [''],two = [''];
                    for (let i = 0; i < fenxis.length; i++) {
                        if(i<3){
                            one[i] = fenxis[i]
                        }else {
                            two[i-3] = fenxis[i]
                        }
                    }
                    this.remen = one
                    this.qita = two
                })
            },
            fenleiChange(){
                console.log(this.fenlei)
                //根据点击的按钮获取不同的数据
                this.getFenxiData(this.fenlei)
            },
            toDetailfenxi(index){
                localStorage.removeItem('currentFenxi')
                localStorage.setItem('currentFenxi',index)
                window.location.href = '/mainPage/fenxiDetail/'
            }
        },
        data(){
            return {
                fenlei: '推荐',
                remen: [
                    // {
                    //     id : '1',
                    //     title : '高等教育学生学习力分析',
                    //     description : '目的是使用ML技术预测学生的期末表现',
                    //     file : '1文件-1MB',
                    // },
                    // {
                    //     id : '2',
                    //     title : '高等教育学生学习力分析',
                    //     description : '目的是使用ML技术预测学生的期末表现',
                    //     file : '1文件-1MB',
                    // },
                    // {
                    //     id : '3',
                    //     title : '高等教育学生学习力分析',
                    //     description : '目的是使用ML技术预测学生的期末表现',
                    //     file : '1文件-1MB',
                    // },
                ],
                qita: [
                    {
                        id : '4',
                        title : '高等教育学生学习力分析',
                        description : '目的是使用ML技术预测学生的期末表现',
                        file : '1文件-1MB',
                    },
                    {
                        id : '5',
                        title : '高等教育学生学习力分析',
                        description : '目的是使用ML技术预测学生的期末表现',
                        file : '1文件-1MB',
                    },
                    {
                        id : '6',
                        title : '高等教育学生学习力分析',
                        description : '目的是使用ML技术预测学生的期末表现',
                        file : '1文件-1MB',
                    },
                ]
            }
        }
    })
</script>
</html>